<template>
  <div id="four" />
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([GridComponent, BarChart, CanvasRenderer])

export default {
  props: {
    item: {
      type: Array,
      required: true
    }
  },
  mounted() {
    var chartDom = echarts.init(document.getElementById('four'))
    chartDom.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      grid: {
        x: 50,
        y: 30,
        x2: 20,
        y2: 140
      },
      series: [
        {
          name: this.item[0].name,
          type: 'bar',
          stack: 'total',
          color: '#2ec7c9',
          emphasis: {
            focus: 'series'
          },
          data: this.item[0].data
        },
        {
          name: this.item[1].name,
          type: 'bar',
          stack: 'total',
          color: '#c8b6eb',
          emphasis: {
            focus: 'series'
          },
          data: this.item[1].data
        },
        {
          name: this.item[2].name,
          type: 'bar',
          stack: 'total',
          color: '#77c3f4',
          emphasis: {
            focus: 'series'
          },
          data: this.item[2].data
        }
      ]
    })
  }
}
</script>

<style scoped>
#four {
  width: 100%;
  height: 300px;
}
</style>
